import * as React from 'react';
import { Divider } from 'antd';

type LabeledListProps = {
  className?: string;
  dividerClassName?: string;
  items: { key: string; label: React.ReactNode; value: React.ReactNode }[];
};

export default function LabeledList(props: LabeledListProps) {
  const { className, dividerClassName, items } = props;
  return (
    <ul className={`LabeledList ${className || ''}`} data-oid='r2d7879'>
      {items.map(({ key, label, value }, i) => {
        const divider = i < items.length - 1 && (
          <li className='LabeledList--item' key={`${key}--divider`} data-oid='03lgdwp'>
            <Divider className={dividerClassName} type='vertical' data-oid='ny0ofua' />
          </li>
        );

        return [
          <li className='LabeledList--item' key={key} data-oid='mj-vpaj'>
            <span className='LabeledList--label' data-oid='wg6hmo_'>
              {label}
            </span>
            <strong data-oid='tq53k.5'>{value}</strong>
          </li>,
          divider,
        ];
      })}
    </ul>
  );
}
